<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :page.sync="page"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="resetChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
    >
      <template
        slot-scope="{type,size,row}"
        slot="menu"
      >
        <el-button
          icon="el-icon-setting"
          :size="size"
          :type="type"
          @click="dictEdit(row)"
        >字典配置</el-button>
      </template>
    </avue-crud>

    <!-- 字典配置 -->
    <el-dialog
      :title="dictTitle"
      :visible.sync="box"
      width="55%"
      @open="onDiaLoad"
    >
      <avue-crud
        :option="diaOption"
        :table-loading="diaLoading"
        :data="diaData"
        ref="crud"
        v-model="diaForm"
        :page.sync="diaPage"
        @row-del="rowDiaDel"
        @selection-change="selectionChange"
        @row-update="rowDiaUpdate"
        @size-change="dictSizeChange"
        @row-save="rowDiaSave"
        @current-change="dictCurrentChange"
        @search-change="dictSearchChange"
        @search-reset="dictResetChange"
        :before-open="beforeOpen"
      >
        <template slot="menuLeft">
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
            @click="handleDelete"
          >删 除
          </el-button>
        </template>
      </avue-crud>
    </el-dialog>
  </div>
</template>

<script>
import {
  addDict,
  getDict,
  delDict,
  upDict,
  getField,
  addField,
  upField,
  delField,
  delFields,
} from '@/api/user.js'

export default {
  data() {
    return {
      form: {},
      selectionList: [],
      loading: true,
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        code: '',
        text: '',
        total: 0,
        background: false,
      },
      searchList: {},
      option: {
        dialogMenuPosition:'center',
        headerAlign: 'center',
        align: 'center',
        searchShow: true,
        searchSpan: 6,
        searchMenuSpan: 4,
        card: true,
        tip: false,
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        menuWidth: 300,
        searchLabelWidth: '25%',
        column: [
          {
            label: '字典名称',
            prop: 'dictName',
            align: 'center',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入字典名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '字典编号',
            prop: 'dictCode',
            search: true,
            align: 'center',
            rules: [
              {
                required: true,
                message: '请输入字典编号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '字典备注',
            prop: 'note',
            align: 'center',
            type: 'textarea',
            span: 24,
          },
          {
            label: '创建时间',
            prop: 'createTime',
            align: 'center',
            display: false,
          },
          {
            label: '创建人',
            align: 'center',
            prop: 'cuser',
            display: false,
            hide: true,
          },
          {
            label: '修改时间',
            align: 'center',
            prop: 'updateTime',
            display: false,
          },
          {
            label: '更新人',
            align: 'center',
            prop: 'uuser',
            display: false,
            hide: true,
          },
        ],
      },
      data: [],

      /* 字典配置弹窗 */
      box: false,
      diaLoading: false,
      diaForm: {},
      diaPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      dictTitle: '字典配置',
      diaData: [],
      diaOption: {
        searchShow: false,
        searchMenuSpan: 4,
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        selection: true,
        menuWidth: 300,
        column: [
          {
            label: '字典编号',
            prop: 'dictCode',
            disabled: true,
            value: '',
          },
          {
            label: '字段名称',
            prop: 'fieldName',
            //search: true,
          },
          {
            label: '字段排序',
            prop: 'fieldOrder',
            type: 'number',
            value: 0,
          },
          {
            label: '字段编号',
            prop: 'fieldCode',
            //search: true,
            rules: [
              {
                required: true,
                message: '请输入字典编号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '备注',
            prop: 'note',
          },
        ],
      },
    }
  },
  methods: {
    rowSave(row, done, loading) {
      delete row.createTime
      delete row.updateTime
      addDict(row).then(
        () => {
          done()
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDiaSave(row, done, loading) {
      addField(row).then(
        () => {
          done()
          this.onDiaLoad()
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate(row, index, done, loading) {
      delete row.createTime
      delete row.updateTime
      upDict(row).then(
        () => {
          done()
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDiaUpdate(row, index, done, loading) {
      delete row.createdTime
      delete row.updateTime
      upField(row).then(
        () => {
          done()
          this.onDiaLoad()
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delDict({
          id: row.id,
        }).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
      })
    },
    rowDiaDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delField({
          id: row.id,
        }).then(() => {
          this.onDiaLoad()
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
      })
    },

    /* 打开字典属性弹窗 */
    beforeOpen(done, type) {
      if (['add'].includes(type)) {
        /* 查询prop: dictCode在array下标 */
        let i = this.findArray(this.diaOption.column, 'dictCode', 'prop')
        if (i > -1) {
          this.diaOption.column[i].value = this.diaPage.code
        }
      }
      done()
    },
    /* 字典配置 */
    dictEdit(row) {
      this.dictTitle = '[' + row.dictName + ']字典配置'
      /* 赋值到diaPage code 用于刷新页面参数 */
      this.diaPage.code = row.dictCode
      this.box = true
    },
    selectionChange(list) {
      this.selectionList = list
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据')
        return
      } else {
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          let arr = this.selectionList.map((v) => v.id)
          delFields({
            ids: arr.toString(),
          }).then((data) => {
            if (data.status) {
              this.onDiaLoad(this.page)
              this.$message({
                type: 'success',
                message: '操作成功!',
              })
            }
          })
        })
      }
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
      this.onLoad()
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.onLoad()
    },
    onLoad(page, params = {}) {
      /* if (page.layout) {
                    Object.assign(params, {
                        page: this.page.currentPage,
                        size: this.page.pageSize,
                    });
                } else {
                    page.dictName ? page['text'] = page.dictName : page['text'] = '';
                    page.dictCode ? page['code'] = page.dictCode : page['code'] = '';
                    Object.assign(params, page);
                } */
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        text: searchList.dictName || '',
        code: searchList.dictCode || '',
        page: this.page.currentPage,
        size: this.page.pageSize,
      })
      this.loading = true
      getDict(params).then((data) => {
        this.loading = false
        this.data = data.data.records
        this.page.total = data.data.total
      })
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* dialog弹窗打开初始化字段列表 */
    onDiaLoad() {
      let diaForm = this.diaForm
      let form = {
        ...diaForm,
        page: this.diaPage.currentPage,
        size: this.diaPage.pageSize,
        code: this.diaPage.code,
      }
      this.diaLoading = true
      getField(form).then((data) => {
        this.diaLoading = false
        this.diaData = data.data.records
        this.diaPage.total = data.data.total
      })
    },
    dictCurrentChange(val) {
      this.diaPage.currentPage = val
      this.onDiaLoad()
    },
    dictSizeChange(val) {
      this.diaPage.pageSize = val
      this.onDiaLoad()
    },
    dictSearchChange(params, done) {
      done()
      this.diaPage.currentPage = 1
      this.diaPage.pageSize = 10
      this.diaForm = {
        ...params,
      }
      this.onDiaLoad()
    },
    dictResetChange() {
      this.diaForm = {}
      this.diaPage.currentPage = 1
      this.diaPage.pageSize = 10
      this.diaPage.total = 0
      this.onDiaLoad()
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
// .el-dialog__header /deep/ .avue-crud__dialog__header{
//   justify-content: center;
// }

</style>
<style>
.avue-crud__dialog__menu{
  display: none !important;
}
.avue-crud__dialog__header{
  justify-content: center !important;
}
</style>
